import React, { PureComponent } from 'react'
import { history } from '@umijs/max'
import { BreadcrumbBar, ProTable } from '@/components'
import { getHashParameterByName } from '@/utils/helper'
import styles from './index.less'

export default class OfflineDetail extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      id: getHashParameterByName('id'),
      menus: [{ name: '任务管理' }, { name: '任务结果' }],
      statusArr: ['运行中', '正常', '异常', 'sql语句出错'],
      columns: [
        {
          title: '规则字段', width: '20%', dataIndex: 'fieldName', key: 'fieldName',
        },
        {
          title: '规则名称', width: '20%', dataIndex: 'ruleName', key: 'ruleName',
        },
        {
          title: '任务状态 ',
          width: '15%',
          dataIndex: 'status',
          key: 'status',
          render: (text) => <span>{this.state.statusArr[text]}</span>,
        },
        {
          title: '比较方式',
          width: '20%',
          dataIndex: 'compareType',
          key: 'compareType',
        },
        {
          title: '期望值', width: '20%', dataIndex: 'expectValue', key: 'expectValue', ellipsis: true,
        },
        // {
        //   title: '操作',
        //   width: '15%',
        //   dataIndex: 'startTime',
        //   key: 'startTime',
        //   ellipsis: true,
        //   render: (text, record) => (
        //     <ProTableOptions>
        //       <span onClick={() => {
        //       }}
        //       >处理
        //       </span>

        //     </ProTableOptions>
        //   ),
        // },
      ],
    }
  }

  componentDidMount() {
  }

  render() {
    const {
      menus, id,
    } = this.state
    return (
      <div className={`${styles.page_content_with_breadcrumb} ${styles.page_content_tabs_height}`}>
        <BreadcrumbBar menu={menus} />
        <div className={styles.back_bar}>
          <i className="iconfont icon-zuo" />
          <span onClick={() => { history.push('/dataQuality/taskManagement') }}>任务结果</span>
        </div>
        <div className={styles.page_content}>
          <div style={{ paddingTop: '.24rem' }} className={styles.page_content_right}>
            <ProTable
              rowKey="key"
              columns={this.state.columns}
              query={{ jobId: id }}
              border={false}
              url="/api/v1/dataQuality/job/getJobRuleFields"
            />
          </div>
        </div>
      </div>
    )
  }
}
